<template>
  <el-card>
    <i-ep-close
      v-show="!panelSetIcon"
      class="el-icon-close"
      style="float: right; padding: 3px 0; z-index: 10"
      @click="deletePanelItem"
    />
    <produce-data-view />
  </el-card>
</template>

<script lang="ts" setup>
const emit = defineEmits(["deletePanelItemEvent"]);

const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { panelSetIcon, id, params } = toRefs(props);

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}
</script>

<style lang="scss" scoped>
.el-card {
  height: 100%;
  background-color: transparent;
  box-shadow: none;
}
.el-card-title {
  font-weight: bold;
  font-size: 14px;
  color: lightslategrey;
}

:deep(.el-card__header) {
  padding: 10px;
}
:deep(.el-card__body) {
  height: calc(100% - 0px) !important;
  padding: 0px !important;
  vertical-align: bottom;
  justify-content: center;
  overflow-y: auto;
}
</style>
